var imgsUl = document.querySelector(".banner .imgs");
var listUl = document.querySelector(".banner .list");

//数据渲染到页面上
for (var i = 0; i < bannerData.length; i++) {
    imgsUl.innerHTML += '<li><img src="' + bannerData[i].src + '" alt=""></li>'
    listUl.innerHTML += '<li>' + bannerData[i].title + '</li>'
}


var imgsLi = imgsUl.querySelectorAll("img");
var listLi = listUl.querySelectorAll("li");

// 给第一个添加效果

imgsLi[0].style.opacity = 1;
listLi[0].className = 'high';

//淡入淡出效果
var timer;
var n = 0;
timer = setInterval(auto, 1500);
function auto() {
    for (var i = 0; i < imgsLi.length; i++) {
        imgsLi[i].style.opacity = 0;
        listLi[i].className = ''
    }
    n++
    if (n == imgsLi.length) {
        n = 0;
    }
    bufferMove(imgsLi[n], { opacity: 100 }, 10);
    listLi[n].className = 'high';
}

//鼠标移入停止轮播
var banner = document.querySelector('.banner');
banner.onmouseover = function () {
    clearInterval(timer);
}

banner.onmouseout = function () {
    timer = setInterval(auto, 1500);
}

//移入文字添加对应效果和图片

for (var i = 0; i < listLi.length; i++) {
    listLi[i].index = i;
    listLi[i].onmouseover = function () {
        for (var j = 0; j < listLi.length; j++) {
            listLi[j].className = '';
            bufferMove(imgsLi[j], { opacity: 0 }, 10);
        }
        bufferMove(imgsLi[this.index], { opacity: 100 }, 10);
        listLi[this.index].className = 'high';
    }
}




//渲染同步课程精品课程函数
function renderData(elem, arr) { //elem-->父元素, arr-->数据
    lesson[arr].forEach(function (item, index) {
        elem.innerHTML += `
            <div class="nr fl">
                <div class="tu">
                    <img src="${item.src}" alt="">
                    <div class="rj">${item.cont}</div>
                    <div class="xx">${item.num}人在学习</div>
                </div>
                <div class="zi">
                    <div>
                        <p>${item.title}</p>
                        <span>${item.time}课时</span>
                    </div>
                    <div class="zi_right">${item.isFree ? '免费' : '付费'}学习</div>
                </div>
            </div>
        `
    })
    //每行第一个
    var nr1 = elem.querySelectorAll(".nr");
    nr1[0].className = 'nr fl nr1';
    nr1[lesson[arr].length/ 2].className = 'nr fl nr1';
    if(elem == l_jpnr){
        nr1[0].style.marginTop = '0px'
        nr1[1].style.marginTop = '0px'
        nr1[2].style.marginTop = '0px'
    }
}

//同步课程内容
var tbnr = document.querySelector(".tbnr");
renderData(tbnr, "online");

//精品课程内容

var l_jpnr = document.querySelector(".l_jpnr");
renderData(l_jpnr, "good");

//在线测试渲染
var zxcs = document.querySelector(".zxcs");
lesson.test.forEach(function (item, index) {
    zxcs.innerHTML += `
    <div class="nr fl">
        <div class="tu">
            <img src="${ item.src }" alt="">
            <div class="rj">${ item.cont }</div>
            <div class="xx">
                <div>1100人已考试</div>
                <div class="cy">${ item.time }</div>
            </div>
        </div>
        <div class="zi">
            <div>
                <p>${ item.title }</p>
                <span>23课时</span>
            </div>
            <div class="zi_right">去考试</div>
        </div>
    </div>
    `
})
if( zxcs ){
    var nr1 = zxcs.querySelectorAll(".nr");
    nr1[0].className = 'nr fl nr1';
    nr1[lesson.test.length/ 2].className = 'nr fl nr1';
}